<template>
  <div class="sidebar">
    <el-scrollbar class="sidebar-scrollbar">
      <el-menu :default-active="activeMenu" class="sidebar-menu" background-color="#ffffff" text-color="#333333" active-text-color="#01509f">
        <el-menu-item index="/home" @click="routerhandler('/home')">
          <el-icon :size="15">
            <span class="iconfont icon-shouye"></span>
          </el-icon>
          <template #title>首页</template>
        </el-menu-item>
        <el-menu-item index="/chat" @click="routerhandler('/chat')">
          <el-icon :size="15">
            <span class="iconfont icon-falvfagui"></span>
          </el-icon>
          <template #title>
            我的法务部
            <i class="tip" v-if="chatDataStore.unReadNum > 0">{{ chatDataStore.unReadNum }}</i>
          </template>
        </el-menu-item>

        <el-menu-item index="/myEnterprise" @click="routerhandler('/myEnterprise')" v-if="menuShow">
          <el-icon :size="15">
            <span class="iconfont icon-qiye"></span>
          </el-icon>
          <template #title>我的企业</template>
        </el-menu-item>

        <el-menu-item index="/laborLibrary" @click="routerhandler('/laborLibrary')">
          <el-icon :size="15">
            <span class="iconfont icon-p-wenku"></span>
          </el-icon>
          <template #title>劳动合规模板库</template>
        </el-menu-item>

        <el-menu-item index="/ScannerView" @click="routerhandler('/ScannerView')" v-if="menuShow">
          <el-icon :size="15">
            <span class="iconfont icon-yibiaopan"></span>
          </el-icon>
          <template #title>合规仪表盘</template>
        </el-menu-item>

        <el-sub-menu index="1" v-if="menuShow">
          <template #title>
            <el-icon :size="15">
              <span class="iconfont icon-hrstaffarchives"></span>
            </el-icon>
            <span>员工管理</span>
          </template>
          <el-menu-item index="/employees/board" @click="routerhandler('/employees/board')">员工看板</el-menu-item>
          <el-menu-item index="/employees/list" @click="routerhandler('/employees/list')">我的员工</el-menu-item>
          <el-menu-item index="/employees/socialManage" @click="routerhandler('/employees/socialManage')">社保管理</el-menu-item>
          <el-menu-item index="/employees/fundManage" @click="routerhandler('/employees/fundManage')">公积金管理</el-menu-item>
        </el-sub-menu>

        <el-menu-item index="/backTuningManage" @click="routerhandler('/backTuningManage')" v-if="menuShow">
          <el-icon :size="15">
            <span class="iconfont icon-rengongbeitiao"></span>
          </el-icon>
          <template #title>在线背调</template>
        </el-menu-item>
        <el-menu-item index="/SigningCenter" @click="routerhandler('/SigningCenter')">
          <el-icon :size="15">
            <span class="iconfont icon-qianshu"></span>
          </el-icon>
          <template #title>签署中心</template>
        </el-menu-item>
        <el-menu-item index="/Regulations" @click="routerhandler('/Regulations')" v-if="menuShow">
          <el-icon :size="15">
            <span class="iconfont icon-a-zhidu3"></span>
          </el-icon>
          <template #title>规章制度</template>
        </el-menu-item>
      </el-menu>
    </el-scrollbar>
    <el-dialog v-model="dialogVisible" title="提示" width="400" :z-index="9" append-to-body>
      <span style="font-size: 16px">请先创建/加入企业</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button
            type="success"
            @click="
              () => {
                companyDataStore.joinDialogVisible = true;
                dialogVisible = false;
              }
            "
          >
            加入企业
          </el-button>
          <el-button
            type="primary"
            @click="
              () => {
                companyDataStore.createDialogVisible = true;
                dialogVisible = false;
              }
            "
          >
            创建企业
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
  import { useChatDataStore } from "@/store/chat";
import { useCompanyDataStore } from "@/store/companys";
import { useUserStore } from "@/store/user";
import { computed, ref, watch } from "@/TUIKit/adapter-vue";
import { ElMessageBox } from "element-plus";
import { useRoute, useRouter } from "vue-router";
  const router = useRouter();
  const route = useRoute();
  const activeMenu = ref(route.path);
  const companyDataStore = useCompanyDataStore();
  const chatDataStore = useChatDataStore();

  const companyList = computed(() => companyDataStore.companyList);
  const currentCompany = computed(() => companyDataStore.defaultCompany);
  const menuShow = computed(() => {
    return companyDataStore.currentComanyInfo?.role_id.includes('1') || companyDataStore.currentComanyInfo?.role_id.includes('3');
  });

  const dialogVisible = ref(false);
  const userStore = useUserStore();

  watch(
    () => route.path,
    newPath => {
      activeMenu.value = newPath;
    }
  );

  const routerhandler = (path: string) => {
    if (path == "/chat" || path == "/home") {
      router.push({ path: path });
      activeMenu.value = path;
      return;
    }
    if (!userStore.userInfo?.auth_type) {
      router.push({ path: "/perCertify" });
      ElMessageBox.confirm("为了您的数据安全，需要先进行个人身份认证", "提示", {
        confirmButtonText: "去认证",
        cancelButtonText: "稍后认证",
        type: "warning",
      })
        .then(() => {
          // router.push({ path: '/perCertify' })
        })
        .catch(() => {
          router.replace({ path: "/home" });
        });
      return;
    }
    if (companyList.value.length == 0) {
      dialogVisible.value = true;
      return;
    }
    if (companyDataStore.checkAuth()) {
      router.push({ path: path });
      activeMenu.value = path;
    }
  };
</script>
<style lang="scss" scoped>
.sidebar {
    width: 220px;

    .sidebar-scrollbar {
        width: 100%;
        height: calc(100vh - 90px);

        .sidebar-menu {
            width: 100%;
            border: none;
        }

        .iconfont {
            font-size: 18px !important;
        }

        .el-sub-menu__title span {
            font-size: 16px;
        }

        .el-menu-item {
            font-size: 16px;
        }
    }

    .tip {
        font-size: 14px;
        font-style: normal;
        padding: 0 10px;
        height: 20px;
        border-radius: 10px;
        background-color: #ff0000;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        margin-left: 5px;
    }
}
</style>
